In this video tutorial, we'll go over one common mistake that make your front matter bloated. And the definition of bloated is that the page takes a very long time to load for the front matter. So I'm just going to use this as an example. So suppose this is the current front matter the user sees. I'm going to come over here. I'm going to say, hey, you know what, I'm going to add an image to this. And suppose the image I want to add is this particular image right here. Let's suppose that's the image I want to add. OK, so this is probably from your marketing team or from somewhere. Right. So what are you going to do is you might copy it. OK, and then as administrator, you're just going to click on edit. And you're going to say, hey, you know what, I'm just going to put it right here. I'm going to control V. OK, and I'm going to click on update. So once you click update, you're like, oh, my goodness, that is way too big, because obviously your marketing team is going to give you a very large image. You say, well, that's a little bit unnecessary. OK, so you click on edit. And then what you're going to do is just make a little bit bigger. And then you say, hey, you know, I'm just going to resize a little bit because on my front matter is it doesn't make sense to make it so big. OK, so that's what you're going to do. OK, so pretend that that's what you're going to do. Takes a little bit of drag and drop. But there we go. So you say, OK, I'm happy with this size and I'm going to click on update. OK, so what you have done is you just copied an image here and then you look at, you know, this is the way that I like. Fine. All right. So the problem is I'm going to go back to this screen right here. So this is what the user sees. And this time I'm going to hit F12. OK, because I want to show a problem that's easier if I show with F12. So on the browser, we have 12 under the network. I'm just going to click on refresh. So notice that it come back here, but notice that the file itself is 10 megs. So that means this particular page, actually the size of it is actually 10 megs. That is because this image, when you copy and paste into the rich text box, what HTML does is it convert an image into a huge amount of text to describe that image, which actually make your front matter massive or we will call it bloated. So that's a problem. And as you can see, the more image you end up having, the more bloated your front matter page will be. And the user will just take longer and longer to load your front matter. And then you'll be thinking, hey, why is Oasis so slow when it is not actually Oasis that is slow? It is the image that you copy and paste it into the front matter rich text box that is so big that is causing the page to take very long. So, for example, if this particular image, if I just go to the property, you will see that the image itself is only one about 1.7 megs. But converting it to text is what make it much, much bigger. So the next set of tutorial, we're going to talk about the best way to minimize this kind of image to text conversion so that the image, you can still have images, but it is not so big. Thank you.

bloated front matter

slow loading times

image-to-text conversion

page speed

web optimization